import React, { useState } from "react";
const Search = (props) => {
  const [searchValue, setSearchValue] = useState("")
  // 当输入框改变时调用
  const handleSearchInputsChange = (e) => {
    setSearchValue(e.target.value);
  }
  // 重置
  const resetInputField = () => {
    setSearchValue("");
  }
  const callSearchFunction = (e) => {
    e.preventDefault(); // 阻止事件的默认点击事件执行
    props.search(searchValue);
    resetInputField();
  }
  return (
    <form className="search">
      <input
        value={searchValue}
        onChange={handleSearchInputsChange}
        type="text"
      ></input>
      <input onClick={callSearchFunction} type="submit" value="SEARCH"></input>
    </form>
  )
}
export default Search